<template>
  <view>
    <headertit :title="title + '车信息'" :showFilter="false" />
    <view class="upinfo">
      <ve-card :title="title + '车信息'">
        <ve-cell :label="title + '车牌号'">
          <text style="margin-right: 12rpx"> {{ main.licenseNo || '-' }} </text>
          <ve-tag color="red" :title="main.tagName" v-if="main.tagName" />
        </ve-cell>
        <ve-cell :label="title + '车型'">{{ main.modelName || '-' }}</ve-cell>
        <ve-cell :label="title + '车里程'">{{ main.carMileage || '-' }}公里</ve-cell>
        <ve-cell-val :label="title + '车油(电)量'" :value="main.oil" />
        <ve-cell :label="title + '里程/油电量照片'" layout="vertical">
          <ve-upload disabled v-model="main.changeCarImg"></ve-upload>
        </ve-cell>
        <ve-cell :label="title + '车照片'" layout="vertical">
          <ve-upload disabled v-model="main.img"></ve-upload>
        </ve-cell>
        <ve-cell :label="title + '车视频'" layout="vertical">
          <ve-upload-video v-model="main.video" :readonly="true" />
        </ve-cell>
      </ve-card>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import headertit from '@/pages/operate/components/headertit.vue'
  import { onLoad } from '@dcloudio/uni-app'
  const main = ref({})
  const title = ref('')
  onLoad((options) => {
    title.value = options.status === '1' ? '换下' : '换上'
    const amount = JSON.parse(options.amount)
    main.value = {
      licenseNo: options.status === '1' ? amount.replaceReturnLicenseNo : amount.replaceGiveLicenseNo, //车牌号
      modelName: options.status === '1' ? amount.replaceReturnModelName : amount.replaceGiveModelName, //车型
      carMileage: options.status === '1' ? amount.replaceReturnCarMileage : amount.replaceGiveCarMileage, //车里程
      oil: options.status === '1' ? amount.replaceReturnOil : amount.replaceGiveOil, //车油(电)量
      changeCarImg: options.status === '1' ? amount.returnMilesFileId : amount.giveMilesFileId, //换上下车照片
      img: options.status === '1' ? amount.returnFileIds : amount.giveFileIds, //车照片
      video: options.status === '1' ? amount.returnVideoFileIds : amount.giveVideoFileIds, //车视频
      tagName: amount.replaceGiveLabel || amount.replaceGiveLabel,
    }
  })
  const imgList = [
    {
      img: 'https://testimage.qichengcx.com/www/images/scooter/index_bg_v1.png',
    },
    {
      img: 'https://testimage.qichengcx.com/www/images/scooter/index_bg_v1.png',
    },
    {
      img: 'https://testimage.qichengcx.com/www/images/scooter/index_bg_v1.png',
    },
  ]
</script>

<style lang="scss">
  page {
    background: #f7f8fa;
  }
  .upinfo {
    padding: 24rpx;
  }
  .car-img {
    .img-view {
      width: 32%;
      height: 204rpx;
      display: inline-block;
      margin-right: 1%;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .myvideo {
    width: 100%;
    height: 368rpx;
    background: #e5e5e5;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    border: 2rpx solid #e2e2e2;
  }
</style>
